<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import echarts from 'echarts'
//require('echarts/theme/macarons'); // echarts theme
import resize from './mixins/resize'
import _ from 'lodash'
import { getOneDateAlarmsStatics } from "@/api/statistics" 

const animationDuration = 1000
export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '260px'
    }
  },
  data() {
    return {
      chart: null,
      carData: [],
      trainData: [],
      allData: [],
      typeAlarmNumberMap: [],
      option: {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        grid: {
          top: 80,
          left: '2%',
          right: '2%',
          bottom: '3%',
          containLabel: true
        },
        legend: [
          {
            data: [],
            textStyle: {
              color: '#fff'
            },
            orient: 'vertical',
            bottom: 10,
            left: 10,
            itemWidth: 15
          },
          {
            data: [],
            textStyle: {
              color: '#52BCA9',
              fontWeight: 'bolder'
            },
            orient: 'vertical',
            bottom: 10,
            left: 60,
            itemWidth: 0
          }
        ],
        series: [
          {
            name: '报警等级',
            type: 'pie',
            radius: [50, 80],
            center: ['65%', '45%'],
            roseType: false,
            label: {
              show: false
            },
            itemStyle: {
              borderColor: '#FFF'
            },
            data: []
          },
          {
            name: '报警类型',
            type: 'pie',
            radius: [0, 50],
            center: ['65%', '45%'],
            roseType: false,
            startAngle: 0,
            label: {
              show: false
            },
            itemStyle: {
              borderColor: '#FFF'
            },
            data: []
          }
        ]
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.chart.setOption(this.option)
      this.asyncGetOneDateAlarmsStatics()
    },

    updateChart() {
      // this.carData = [{ value: 10, name: '一级预警' }, { value: 12, name: '二级预警' }, { value: 15, name: '三级预警' }]
      // this.trainData = [{ value: 22, name: '机车预警' }, { value: 12, name: '人员预警' }]
      this.allData = [...this.carData, ...this.trainData]

      this.option.legend[0].data = this.allData
      this.option.legend[1].data = this.allData
      this.option.legend[1].formatter = name => {
        let item = _.find(this.allData, { name })
        let space = _.padStart('', (name.length - 2) * 2.3, ' ')
        return space + item.value
      }

      this.option.series[0].data = this.carData
      this.option.series[1].data = this.trainData

      this.chart.setOption(this.option)
    },
    async asyncGetOneDateAlarmsStatics() {
      const res = await getOneDateAlarmsStatics()
      if (res.code === 0) {
        let levelAlarmNumber = res.data.levelAlarmNumber
        let typesAlarmNumber = res.data.typesAlarmNumber

        this.carData = []
        this.trainData = []

        let alarmTxtMap = {'1':'一级报警', '2':'二级报警', '3':'三级报警'}

        Object.keys(levelAlarmNumber).forEach(key => {
          this.carData.push({ value: levelAlarmNumber[key], name: alarmTxtMap[key] })
        })
        Object.keys(typesAlarmNumber).forEach(key => {
          this.trainData.push({ value: typesAlarmNumber[key], name: key })
        })

        this.updateChart()
      }
    }
  }
}
</script>
